<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
	padding: 0;
	margin: 0;
}
	#kw_form{
		position: relative;
		/*border: 1px solid blue;*/
		display: block;
		margin: 100px auto;
		width: 500px;
	}
	#kw_form #keyword{
		width: 488px;
		height: 30px;
		border-left: 1px solid #9A9A9A;
		border-top: 1px solid #9A9A9A;
		border-bottom: 1px solid #CDCDCD;
		border-right: 1px solid #CDCDCD;
		
		background: url(bg.png) no-repeat;
		font-size: 16px;
		text-indent: 10px;
	}

	#kw_form ul{
		position: absolute;
		top: 31px;
		left: 0px;
		width: 488px;
		border: #817F82 1px solid;
	}
	#kw_form ul li{
		font-size: 14px;
		line-height: 25px;
		list-style: none;
		text-indent: 8px;
		font-weight: 800;
	}
	#kw_form ul li span{
		font-weight: 400;
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#keyword').keyup(function(){
		$.ajax({
			url:"baidu.php",//数据发送地址
			type: 'post',//数据传输方式
			data:{'kw':$('#keyword').val()},//需要传送的数据
			dataType:'json',//返回的数据格式
			success:function(re){
				$('#kw_form ul').empty();
				for(var i=0;i<re.length;i++){
					re[i] = re[i].replace('北京','<span>北京</span>');
					$('#kw_form ul').append('<li>'+re[i]+'</li>');
				}
				// alert(re)
				//这是成功接收到返回结果后执行的函数
			}
		})

	})
})
</script>
</head>

<body>
	<form action="" id="kw_form" method="post">
		<input type="text" id="keyword" />
		<ul>
			<!-- <li><span>北京</span>时间</li>
			<li><span>北京</span>晚报</li>
			<li><span>北京</span>遇上西雅图</li>
			<li><span>北京</span>PM2.5</li>
			<li><span>北京</span>后盾网</li> -->
		</ul>
	</form>
	
</body>
</html>
